<template>
  <!--template里面只能写一个元素-->
  <div id="app">
    <h3>App</h3>
    <div v-for="item in goodsList" :key="item.id">
      <p>商品名称：{{item.goodsName}}</p>
      <p>商品价格：{{item.goodsPrice | currency(3)}}</p>
      <p>上架时间：{{item.addTime | date}}</p>
      <hr/>
    </div>
    <p>子组件</p>
    <Child :num="20"></Child>
  </div>
</template>

<!--逻辑-->
<script>
import Child from "@/components/Child";
export default {
  name: 'App.vue',
  components: {Child},
  data(){
    return {
      goodsList:[
        {
          id:1,
          goodsName:"app->1",
          goodsPrice:19.123,
          addTime:Date.now()
        },
        {
          id:2,
          goodsName:"app->2",
          goodsPrice:34.456,
          addTime:Date.now()-99999999
        }
      ]
    }
  },
  // 局部过滤器：在哪个组中注册的，只允许在哪个组件中使用
  // 过滤器 理解为Util
  // filters:{
  //     date(t){
  //         const timer = new Date(t);
  //         return timer.getFullYear() + "-" +
  //                 (timer.getMonth() + 1).toString().padStart(2, 0) + "-" +
  //                 timer.getDate().toString().padStart(2, 0) + " " +
  //                 timer.getHours().toString().padStart(2, 0) + ":" +
  //                 timer.getMinutes().toString().padStart(2, 0) + ":" +
  //                 timer.getSeconds().toString().padStart(2, 0);
  //     },
  //     currency(v,n=2,type="$"){
  //         return type+v.toFixed(n);
  //     }
  // }
}
</script>

<!--样式-->
<style lang="less" scoped>

h3 {
  color: #20ae78;
  font-size: 20px;
  font-weight: bold;
}
</style>
